---
description: Компонент ограничивает текстовый контент, скрывая его за многоточием.
---

<Overview group="typography">

# EllipsisText [tag:component]

Компонент предназначен для ограничения текстового содержимого до определенного количества строк
с добавлением многоточия в конце, если текст превышает заданное ограничение.

</Overview>

<Playground>
  ```jsx
  <EllipsisText maxWidth={200}>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
    labore et dolore magna aliqua.
  </EllipsisText>
  ```
</Playground>

## Типографика

Необязательно оборачивать типографические компоненты (например, [`Text`](/components/typography#text) или [`Paragraph`](/components/typography#paragraph))
в компонент `EllipsisText` для ограничения количества видимого контента. Достаточно передать типографический компонент в
свойство `Component`:

<Playground>
  ```jsx
  <EllipsisText Component={Footnote} maxWidth={100}>
    Мелкий текст скрыт за многоточием
  </EllipsisText>
  ```
</Playground>

## Известные ограничения [#limitations]

Для работоспособности компонента необходимо, чтобы у ближайшего родителя была ограничена ширина.
Если это не так, то необходимо ограничить ширину вручную.

Рассмотрим на примере [`HorizontalCell`](/components/horizontal-cell), который при `size="auto"` перестаёт ограничивать ширину.
В качестве ограничивающей ширины будем брать ширину изображения:

<Playground>
  ```jsx
  <HorizontalCell
    size="auto"
    title={
      <EllipsisText maxWidth={100} maxLines={2}>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
      </EllipsisText>
    }
  >
    <Image
      size={100}
      borderRadius="l"
      src="https://sun9-24.userapi.com/c639120/v639120173/3fe6f/tgPr7lecAY4.jpg"
    />
  </HorizontalCell>
  ```
</Playground>

## Свойства и методы [#api]

<PropsTable name="Typography/EllipsisText/EllipsisText" />
